<template>
	<view class="uni-goods-nav">
		<!-- 底部占位 -->
		<view class="nav" style="height: 100%;width: 100%;">
			
			<view class="select" v-show="show" style="background-color: #fff;">
				<view>
					<view class="title">
						<view>自由过关</view>
						<view @click="Packup" class="close">收起</view>
					</view>
					<view class="Content">
						<!-- 循环渲染隐藏的内容 -->
						<view v-for="(item,index) in hideList" :key="index"  @click="changeColor(item)" :class="item.isActive?'redColor':''">{{item.text=='1单关1'? '单关' : item.text}}</view>
					</view>
				</view>
				<view v-show="ismnshow===true&&mnhideList.length != 0" v-if="Type == '北京单场' ? false : Type == '胜负过关' ? false : true">
					<view class="title">
						<view>多串过关</view>
					</view>
					<view class="Content">
						<!-- 循环渲染隐藏的内容 -->
						<view v-for="(item,index) in mnhideList" :key="index"  @click="mnchangeColor(item)" :class="item.isActive?'redColor':''">{{item.text}}</view>
					</view>
				</view>
			</view>
			<view class="check" style="height: 50px; width: 100%; background-color: #fff; display: flex;flex-direction: row;" >
				<view style="margin: 15rpx; width: 100%;">
					<view class="" >
						<uni-row  :gutter="gutter" >
							<uni-col :span="10" :pull="0">
								<view 
									:style="Type == '任选九' || Type == '胜负彩'?'display: none;':''"
									style="height: 50rpx; width:280rpx ;margin: 5rpx;border: 2rpx solid #ccc;text-align: center;" @click="click"> 
									<uni-row  :gutter="gutter">
										<uni-col :span="20" :push="2">
											<view v-show="hidetext.length===0">
												<text style="font-size: 26rpx; width: 100%;">请选择过关方式</text>
											</view>
											<view class="hidetext" v-show="hidetext.length!==0">
												<text style="font-size: 26rpx; width: 100%;">{{gethidetext()}}</text>
											</view>
										</uni-col>
										<uni-col :span="4" :push="0">
										</uni-col>
									</uni-row>
								</view>
							</uni-col>
							
							<uni-col :span="8" :push="Type == '任选九' || Type == '胜负彩'?16:0">
								
								<numberBox @numberChange="numChange" :minValue="0"></numberBox>
							</uni-col>
							<uni-cil :span="4" :push='0' style="margin-left: 15rpx;">
							</uni-cil>
						</uni-row>
					</view>
					
				</view>
				
			</view>
			<view class="uni-tab__seat" />
			
				<view class="uni-tab__cart-box flex" >
					<!-- 垃圾桶 -->
					<view class="flex uni-tab__cart-sub-left" v-if="Show_trash_filled">
						<view class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick()">
							<view class="uni-tab__icon">
								<uni-icons type="trash-filled" size="20" color="#646566"></uni-icons>
							</view>
							<text class="uni-tab__text">清空</text>
						</view>
					</view>
					<view style="height: 100%; margin:auto; text-align: center; display: flex; flex-direction: column;line-height:45rpx; "
						:style="Show_trash_filled==false ? 'width: 50%;':'width: 60%;'">
						<view >
							<text :style="Show_trash_filled==false ? 'font-size:26rpx;':false">共{{valuesdata['Note']}}注 {{valuesdata['Multiple']}}倍 {{(valuesdata['Amount']).toFixed()}}元</text>
						</view>
						<view v-if="valuesdata['Note'] !== 0">
								
								<!-- 这个是竞彩篮球足球特供 -->
								<view v-if="Show_trash_filled==false" style="overflow: hidden; white-space:nowrap;height: 90rpx;">
									<text v-if="valuesdata['bonusmin']===valuesdata['bonusmax']&&valuesdata['bonusmin']!='0.00'"
											:style="Show_trash_filled==false ? 'font-size:26rpx;color:#ff6060;':false">
												预测中奖：{{(valuesdata['bonusmax']*valuesdata['Multiple']).toFixed(2)}}</text>
									<text v-if="valuesdata['bonusmin']!==valuesdata['bonusmax']&&valuesdata['bonusmin']!='0.00'"
											:style="Show_trash_filled==false ? 'font-size:26rpx;color:#ff6060;':false">
												{{(valuesdata['bonusmin']*valuesdata['Multiple']).toFixed(2)}}~{{(valuesdata['bonusmax']*valuesdata['Multiple']).toFixed(2)}}</text>
									<text v-if="valuesdata['bonusmin']=='0.00'"
											:style="Show_trash_filled==false ? 'font-size:28rpx;color:#ff6060;':false">
												{{(valuesdata['bonusmax']*valuesdata['Multiple']).toFixed(2)}}</text>
								</view>
						
				
						</view>
							<text v-if="valuesdata['Note'] == 0" style="font-size:28rpx;color:#ff6060;">预测奖金0.00元</text>
					</view>
					
				
	<!-- 				<view
						style="display: flex;width: 380rpx;height: 90rpx;overflow: hidden;border-radius: 25rpx;margin-right: 10rpx;">
						<view @click="buttonClick(1)" class="button"
							style="height: 90rpx;background-color: #ffeec6;transition: all 0.5s;border-radius: 25rpx 0 0 25rpx;"
							:style="valuesdata['Note'] != 0 && showButton?'width: 50%;':'width: 0%;pointer-events: none;'">
								<text style="font-size: 34rpx;color: #3d3d3d; white-space:nowrap;overflow:hidden;">奖金优化</text>
							</view>
				
					</view> -->
					
				</view>
				<!-- <view class="sharebtn"  open-type="share">分享</view> -->
			</view>
			
		</view>
		
</template>

<script>
import numberBox from "@/components/common/yc-newNumber_box/yc-newNumber_box.vue";
import common from '@/common/common';

export default {
  props: {
    ismnshow: Boolean,
    hideList: Array,
    mnhideList: Array,
    valuesdata: Object,
    hidetext: Array,
    Type: String,
    BonusOptimization: String, // 店主是否开启了奖金优化
  },
  data() {
    return {
      numberValue: 50,
      Show_trash_filled: false,
      show: false,
      showButton: true,
      gutter: 0,
    };
  },
  watch: {
    // Type(newVal) {
    //   if (newVal === '竞彩足球' || newVal === '竞彩篮球') {
    //     this.Show_trash_filled = false;
    //   }
    // },
  },
  onLoad() {
	 

  },
  beforeMount() {
  	if(this.Type == '竞彩足球' || this.Type == '竞彩篮球'){
  		Show_trash_filled.value = false
  	}
  },
  methods: {
	  share(){
		  this.$emit("share");
	  },
    // 数字选择器选择改变
    numChange(e) {
      this.$emit("changMultiple", e);
    },
    
    // 过关方式按钮 弹起/收起
    click() {
      this.show = !this.show;
    },
    
    // 过关方式弹窗弹起-收起
    Packup() {
      this.show = false;
    },
    
    // 自由过关选择
    changeColor(e) {
      this.showButton = true;
      this.$emit("hidelick", e);
    },
    
    // 多串过关选择
    mnchangeColor(e) {
      this.showButton = false;
      this.$emit("mnhidelick", e);
    },
    
    // 提交按钮点击
    buttonClick(e) {
      if (!this.Show_trash_filled) {
        if (e === 0) {
          this.$emit("buttonClick");
        } else {
          if (this.valuesdata.Note > 80) {
            uni.showToast({
              title: '大于80注禁止奖金优化！',
              position: 'center',
              icon: 'error',
            });
          } else if (this.BonusOptimization === '0') {
            uni.showToast({
              title: '店主关闭了奖金优化喔~',
              position: 'center',
              icon: 'none',
            });
          } else if (this.Type === '竞彩篮球') {
            if (this.counter.BettingContent.Content.length > 3) {
              uni.showToast({
                title: '三场以上比赛不支持玩法多选',
                position: 'center',
                icon: 'none',
              });
            } else {
              this.counter.BettingContent.remarks = [];
              this.counter.BettingContent.remarks = this.valuesdata;
              this.counter.BettingContent.remarks.reachType = this.hidetext;
              uni.navigateTo({
                url: '../submit/optimizing',
                animationType: 'slide-in-right',
                animationDuration: 400,
              });
            }
          } else {
            this.counter.BettingContent.remarks = [];
            this.counter.BettingContent.remarks = this.valuesdata;
            this.counter.BettingContent.remarks.reachType = this.hidetext;
            uni.navigateTo({
              url: '../submit/optimizing',
              animationType: 'slide-in-right',
              animationDuration: 400,
            });
          }
        }
      } else {
        this.$emit("buttonClick");
      }
    },
    savePlan() {
      this.$emit("savePlan");
    },
	gethidetext(){
		let hidenewtext = ''
		let data = common.ArraySort(this.hidetext)
		for(let i=0;i<=data.length-1;i++){
			if(i===0){
				hidenewtext = data[i]
			}else{
				hidenewtext = hidenewtext + ','+ data[i]
			}
		}	
		// 替换1单关1为单关
		return common.formatEllipsis(hidenewtext.replace(/1单关1/,"单关"),15)
	}
  },

  components: {
    numberBox,
  },
};
</script>

<style lang="scss" scoped>
	.sharebtn{
		    position: absolute;
		    bottom: 136px;
		    right: 15px;
		    background-color: #4fce4a;
		    border-radius: 30px;
		    padding: 10px;
		    width: 80px;
		    display: flex;
		    justify-content: center;
	}
.close{
	border:1rpx #ccc solid;
	text-align:center;
	padding:5rpx 10rpx;
	border-radius:5rpx;
}
	
.redColor{
	background-color: red;
	color: #fff;
}


.nav .select .Content{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	view {
		text-align: center;
		width: 23.8%;
		margin: 10rpx 20rpx;
		padding: 5rpx 10rpx;
		border: 2rpx solid #ccc;
	}
	
}
	
.nav .select .title{
	display:flex;
	width:700rpx;
	margin:20rpx auto;
	align-items:center;
	justify-content: space-between;
	color: #aaaaaa;
}
	
.nav .select{

	font-size: 25rpx;
}

.flex {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
}

.uni-goods-nav {
	/* 边框 */
	border-top: 1rpx solid #aaaaaa;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	background-color: white;
}

.uni-tab__cart-box {
	flex: 1;
	height: 70px;
	background-color: #fff;
	z-index: 900;
}

.uni-tab__cart-sub-left {
	padding: 0 5px;
}

	.uni-tab__cart-sub-right {
		flex: 1;
	}.uni-tab__cart-sub-right-button{
		color: #fff;
		font-size: 34rpx;
	}

.uni-tab__right {
	margin: 5px 0;
	margin-right: 10px;
	border-radius: 100px;
	overflow: hidden;
}

.uni-tab__cart-button-left {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	// flex: 1;
	position: relative;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 0 10px;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.uni-tab__icon {
	width: 18px;
	height: 18px;
}

.image {
	width: 18px;
	height: 18px;
}

.uni-tab__text {
	margin-top: 3px;
	font-size: 12px;
	color: #646566;
}

.uni-tab__cart-button-right {
	border-radius:20rpx 0 0 20rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
	flex: 1;
	justify-content: center;
	align-items: center;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.uni-tab__cart-button-right-text {
	font-size: 14px;
	color: #fff;
}

.uni-tab__cart-button-right:active {
	opacity: 0.7;
}

.uni-tab__dot-box {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
	position: absolute;
	right: -2px;
	top: 2px;
	justify-content: center;
	align-items: center;
	// width: 0;
	// height: 0;
}

.uni-tab__dot {
	// width: 30rpx;
	// height: 30rpx;
	padding: 0 4px;
	line-height: 15px;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	background-color: #ff0000;
	border-radius: 15px;
}

.uni-tab__dots {
	padding: 0 4px;
	// width: auto;
	border-radius: 15px;
}
	.button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>